<template>
    <tool-header>
    {{title}}
  </tool-header>
    <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off">
        <a-form-item label="Hash Type" name="hashType">
            <a-select v-model:value="formState.hashType" show-search placeholder="Select a person" style="width: 200px"
                :options="options" :filter-option="filterOption"></a-select>
        </a-form-item>
        <a-form-item label="Encode Type" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-segmented v-model:value="formState.encodeType" :options="encodeList" />
        </a-form-item>
        <a-form-item label="Message" name="message">
            <a-textarea v-model:value="formState.message" :rows="2" />
        </a-form-item>

        <a-form-item label="Encrypted Messsage" name="encryptedMessage">
            <a-textarea v-model:value="encryptedMessage" :rows="2" />
        </a-form-item>

        <a-form-item label="Compare Data" name="compateData">
            <a-textarea v-model:value="formState.compareData" :rows="2" />
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
            <a-alert v-if="matched" message="Matched" type="success" />
            <a-alert v-else message="Not Matched" type="error" />
        </a-form-item>
    </a-form>
</template>

<script setup lang='ts'>
import { reactive, ref, computed } from 'vue'
import type { SelectProps } from 'ant-design-vue';
import CryptoES from 'crypto-es';
import { useRoute } from 'vue-router'
import ToolHeader from '../ToolHeader.vue'
const route = useRoute();
const title = route.query.title

const encodeList = reactive(['Hex', 'Base64'])

const options = ref<SelectProps['options']>([
    { value: 'SHA1', label: 'SHA1' },
    { value: 'SHA224', label: 'SHA224' },
    { value: 'SHA256', label: 'SHA256' },
    { value: 'SHA384', label: 'SHA384' },
    { value: 'SHA512', label: 'SHA512' },
    { value: 'MD5', label: 'MD5' },
    { value: 'RIPEMD160', label: 'RIPEMD-160' },
]);

const filterOption = (input: string, option: any) => {
    return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
interface FormState {
    message: string;
    compareData: string;
    hashType: string;
    encodeType: string;
}

const formState = reactive<FormState>({
    message: 'Hello World',
    compareData: '',
    hashType: 'MD5',
    encodeType: 'Hex'
});

function doHash(formData: FormState): string {
    let hash = CryptoES[formData.hashType](formState.message);
    if (formData.encodeType == 'Hex') {
        return hash.toString(CryptoES.enc.Hex)
    }
    else {
        return hash.toString(CryptoES.enc.Base64)
    }
}
const encryptedMessage = computed(() => {
    return doHash(formState)
})

const matched = computed(() => {
    return encryptedMessage.value === formState.compareData
})
</script>

<style scoped></style>